<template>
  <div class="scroller-transverse">
    <div class="scroller-transverse-ware" ref="transverseWare">
      <div v-bind:style="{ width: sorllerwidth + 'px' }" class="scroller-transverse-content">
        <span v-bind:style="{width: width +'px',display: 'inline-block'}" @click="hanlder($index,item);" v-bind:class="nowTag==$index ? 'activeClass' : ''" class="scroller-transverse-tag" v-for="(item,$index) in data">{{item.name}}</span>
      </div>
      <div class="scroller-line" v-bind:style="{ transform: 'translateX('+lineLeft+'px)'}"></div>
    </div>
  </div>
</template>   
<script>
import { scrollerX } from "@/utils/tool";
import { setTimeout } from "timers";
import { HashMap } from "@/utils/hashMap";
export default {
  name: "scroller-transverse",
  props: ["scrollerLeft", "data"],
  model: {
    prop: "scrollerLeft",
    event: "backData"
  },
  data() {
    return {
      width: 100,
      windowsWidth: 0,
      sorllerwidth: 500,
      lineLeft: 15,
      nowTag: 0,
    };
  },

  mounted() {
    var _this=this;
    //this.mountHeight();
    this.windowsWidth = document.body.offsetWidth;
    this.$refs.transverseWare.addEventListener('scroll', function(){
         _this.$emit("backData", _this.$refs.transverseWare.scrollLeft);
    })
  },
  activated() {
    this.$refs.transverseWare.scrollLeft = this.scrollerLeft;
  },
  watch:{
    data(val){
      if(val){
          this.mountHeight()
      }
    }
  },
  methods: {
    mountHeight() {
      let nul = this.data.length;
      this.sorllerwidth = nul * this.width || this.sorllerwidth;
    },
    hanlder($index,item) {
      let that = this;
      let w = $index * this.width - this.windowsWidth / 2 + this.width / 2;
      this.nowTag = $index;
      this.$emit("category",item);
      scrollerX(this.$refs.transverseWare, w, 400);
      setTimeout(() => {
        that.lineLeft = $index * that.width + 17;
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
.scroller-transverse {
  .scroller-line {
    position: absolute;
    width: 65px;
    border: 1px solid;
    height: 0px;
    top: 1rem;
    z-index: 10;
    transition: transform 0.5s linear;
  }
  ::-webkit-scrollbar {
    display: none;
  }
  .scroller-transverse-ware {
    width: 100%;
    overflow: auto;
    height: 1.0667rem;
    position: relative;
    .scroller-transverse-content {
      height: 1.0667rem;
      line-height: 1.0667rem;
      .scroller-transverse-tag {
        text-align: center;
        opacity: 0.6;
        float: left;
         overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
      }
      .activeClass {
        opacity: 1 !important;
      }
    }
  }
}
</style>


